<template>
  <el-row class="classbody__allClass">
    <el-row class="classbody__title">信息青年全站分类导航</el-row>
    <template v-for="(item, index) in allClass">
      <el-divider v-if="index !== 0" :key="index"></el-divider>
      <el-row :key="index" class="classbody__allClass__body">
        <el-col :span="2" class="classbody__allClass__title">
          <a :href="`/class/${item.id}/0`">{{ item.name }}</a>
        </el-col>
        <el-col :span="22">
          <ul class="classbody__classList">
            <li v-for="(itemClass, indexClass) in item.map" :key="indexClass">
              <el-link
                :underline="false"
                :href="`/class/${item.id}/${itemClass.id}`"
                >{{ itemClass.name }}</el-link
              >
            </li>
          </ul>
        </el-col>
      </el-row>
    </template>
  </el-row>
</template>

<script>
export default {
  props: {
    allClass: {
      type: Array,
      default: () => {
        return []
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.classbody__allClass__addUser {
  cursor: pointer;
  @include font(18px, $color: $--color-primary);
}
.classbody__allClass__title {
  margin: 4px 0px;
  padding-left: 10px;
  border-left: 3px $--color-primary solid;
  height: 100%;
  & > a {
    @include font($color: $--color-primary);
  }
  @include flexCenter($jc: flex-start);
}
.classbody__classList {
  flex-wrap: wrap;
  @include flexCenter($jc: left);
  & > li {
    margin: 4px 0px;
    padding: 0px 10px;
    border-left: 1px solid #ccc;
    @include font(14px);
  }
}
</style>
